<script setup lang="ts">
import { ref, onMounted } from "vue";
const defaultImgUrl = ref("");
const imgList: string[] = [
  "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0828%2F5a2863a7j00six00d000hd200a6009yg00a6009y.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
  "https://img2.baidu.com/it/u=1344414611,1414589098&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=285",
  "http://img1.baidu.com/it/u=3615554588,1533818780&fm=253&app=138&f=JPEG?w=500&h=555",
  "http://img1.baidu.com/it/u=3288390176,2781953877&fm=253&app=138&f=JPEG?w=520&h=500",
  "http://img2.baidu.com/it/u=2294394091,1356641831&fm=253&app=138&f=JPEG?w=500&h=666",
  "https://pic.rmb.bdstatic.com/bjh/64e266aecf8d34763a497514e6d7a7b22954.jpeg@h_1280",
  "https://q8.itc.cn/q_70/images01/20240204/2f89f0d12c0f4d76bf50b6e7b56ab368.jpeg",
  "https://img2.baidu.com/it/u=1894203907,2858592961&fm=253&fmt=auto&app=138&f=JPEG?w=682&h=612",
];
const changeAvatar = () => {
  defaultImgUrl.value = imgList[~~(Math.random() * imgList.length)];
  // defaultImgUrl.value = imgList[~~(Math.random() * imgList.length)]
};
onMounted(() => {
  changeAvatar();
});
</script>

<template>
  <div class="container">
    <img :src="defaultImgUrl" alt="" /><br />
    <button @click="changeAvatar">切换图片</button>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  text-align: center;
  margin: 100px auto;
}
.container img {
  width: 300px;
  height: 300px;
}
</style>
